<!DOCTYPE html>
<html lang="zh">
<head>
    <title>{block name="title"}{$title|default=''}{if !empty($title)} · {/if}{:sysconf('site_name')}{/block}</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" />
    <link rel="shortcut icon" href="{:sysconf('site_icon')}">
    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/theme/css/iconfont.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/theme/css/console.css?at={:date('md')}">
    {block name="style"}
    <style>
        .search-results {
            position: unset; /* 设置为固定定位 */
            top: 0; /* 距离顶部的距离 */
            left: 0; /* 距离左侧的距离 */
            width: 100%; /* 宽度占满整个屏幕 */
            height: 33.33vh; /* 固定1/3屏幕高度 */
            background-color: #ffffff; /* 设置背景色 */
            overflow-y: auto; /* 添加垂直滚动条 */
            padding: 5px; /* 设置上下padding */
            display: none; /* 隐藏搜索结果 */
            z-index: 999; /* 设置层级，确保覆盖在页面上方 */
        }

        .search-results li {
            border: 1px solid #ccc;
            padding: 5px 10px;
            text-align: center;
            height: 20px;
        }
    </style>
    {/block}
    <script>window.tapiRoot = '{:sysuri("admin/index/index",[],false)}'</script>
    <script src="__ROOT__/static/plugs/jquery/pace.min.js"></script>
    <script src="__ROOT__/static/plugs/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="__ROOT__/static/plugs/layui/layui.js"></script>
    <script src="__ROOT__/static/plugs/require/require.js"></script>
    <script src="__ROOT__/static/admin.js"></script>

</head>

{block name='content'}

<div class="layui-header">
    <label class="layui-form-item relative block">
        <input class="layui-input text-center" id="keyword" name="keyword" value='' placeholder="搜索司机姓名/车牌号码">
        <ul id="searchResults" class="search-results"></ul>
    </label>
</div>

<form action="{:request()->url()}" autocomplete="off" class="layui-form layui-card" data-auto="true" method="post" target="_self">
    <div class="layui-card-body padding-40">

        <label class="layui-form-item relative block">
            <span class="color-green font-w7">车牌号码</span>
            <span class="color-desc margin-left-5">plate_number</span>
            <input class="layui-input" name="plate_number" value='{$vo.plate_number|default=""}' readonly>
        </label>

        <label class="layui-form-item relative block">
            <span class="color-green font-w7">车型</span>
            <span class="color-desc margin-left-5">car_vehicle_type</span>

            <input class="layui-input" name="car_vehicle_type" value='{$vo.car_vehicle_type|default=""}' >
        </label>

        <div class="goods-item-box">
            <div class="layui-clear">
                <fieldset>
                    <legend><span class="layui-badge think-bg-violet">喷漆完成</span></legend>
                    <div class="layui-form-item">
                        {foreach [-1 => '其他', 1 => '是',0 => '否'] as $k=>$v}
                        {if (isset($vo.paint_status) and $vo.paint_status eq $k) or (empty($vo.paint_status) and $k eq -1)}
                        <input checked name="paint_status" title="{$v}" type="radio" value="{$k}">
                        {else}
                        <input name="paint_status" title="{$v}" type="radio" value="{$k}">
                        {/if}
                        {/foreach}
                    </div>
                </fieldset>
            </div>
        </div>

        <label class="layui-form-item relative block">
            <span class="color-green font-w7">喷漆师傅</span>
            <span class="color-desc margin-left-5">painter</span>
            <input class="layui-input" name="painter" value='{$vo.painter|default=""}'>
        </label>

        <div class="goods-item-box">
            <div class="layui-clear">
                <fieldset>
                    <legend><span class="layui-badge think-bg-violet">尾部喷漆</span></legend>
                    <div class="layui-form-item">
                        {foreach [-1 => '其他', 1 => '是',0 => '否'] as $k=>$v}
                        {if (isset($vo.end_paint_status) and $vo.end_paint_status eq $k) or (empty($vo.end_paint_status) and $k eq 1)}
                        <input checked name="end_paint_status" title="{$v}" type="radio" value="{$k}">
                        {else}
                        <input name="end_paint_status" title="{$v}" type="radio" value="{$k}">
                        {/if}
                        {/foreach}
                    </div>
                </fieldset>
            </div>
        </div>

        <div class="goods-item-box">
            <div class="layui-clear">
                <fieldset>
                    <legend><span class="layui-badge think-bg-violet">是否覆盖</span></legend>
                    <div class="layui-form-item">
                        {foreach [-1 => '其他', 1 => '是',0 => '否'] as $k=>$v}
                        {if (isset($vo.has_cover) and $vo.has_cover eq $k) or (empty($vo.has_cover) and $k eq 1)}
                        <input checked name="has_cover" title="{$v}" type="radio" value="{$k}" lay-filter="has_cover">
                        {else}
                        <input name="has_cover" title="{$v}" type="radio" value="{$k}" lay-filter="has_cover">
                        {/if}
                        {/foreach}
                    </div>
                </fieldset>
            </div>
        </div>

        <label class="layui-form-item relative block" id="cover_num">
            <span class="color-green font-w7">覆盖几面</span>
            <span class="color-desc margin-left-5">cover_num</span>
            <input class="layui-input" name="cover_num" value='{$vo.cover_num|default=""}' type="number" step="1" min="1">
        </label>

        <label class="layui-form-item relative block" id="cover_price">
            <span class="color-green font-w7">覆盖收费</span>
            <span class="color-desc margin-left-5">cover_price</span>
            <input step="0.01" min="0" max="99999.99" type="number" oninput="if(value<0)value=0" class="layui-input" name="cover_price" placeholder="请输入覆盖收费" required value="{$vo.cover_price|default='0.00'}">
        </label>

        <label class="layui-form-item relative block" id="invite_remarks">
            <span class="color-green font-w7">邀约信息</span>
            <span class="color-desc margin-left-5">invite_info</span>
            <textarea placeholder="请输入邀约信息" class="layui-textarea" name="invite_info">{$invite_info|default=""}</textarea>
        </label>

<!--        <div class="layui-form-item layui-hide">-->
<!--            <div class="layui-clear">-->
<!--                <fieldset>-->
<!--                    <legend><span class="layui-badge think-bg-violet">完工附件</span></legend>-->
<!--                    <div class="layui-form-item">-->
<!--                        <input name="images_complete" type="hidden" required value="{$vo.images_complete|default=''}">-->
<!--                    </div>-->
<!--                </fieldset>-->
<!--            </div>-->
<!--        </div>-->

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input name='id' type='hidden' value='{$vo.id}'>{/notempty}

        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>

</form>

{/block}

{block name='script'}
<script>
    /*! 表单初始化 */

    window.form.render();
    setTimeout(function() {
        $('[name="images_complete"]').uploadMultipleImage();
        console.log($('[name="images_complete"]').parent().parent().parent().parent().removeClass('layui-hide'))
        // console.log($('#cover_num').removeClass('layui-hide'))
    }, 1000); // 延迟1秒钟调用uploadMultipleImage函数

    (function () {

        layui.form.render();

        // 监听输入框的按键释放事件
        $('#keyword').on('input', function() {
            var keyword = $(this).val();

            // 发送Ajax请求
            $.ajax({
                url: "{:url('search')}", // 替换为你的后端处理搜索的URL
                method: 'POST',
                data: { keyword: keyword },
                success: function(response) {
                    var results = response.data; // 获取搜索结果数组
                    var searchResults = $('#searchResults');
                    searchResults.empty();

                    results.forEach(function(result) {
                        var listItem = $('<li><a href="' + result.url + '">' + result.username + ' - ' + result.plate_number + '</a></li>');
                        searchResults.append(listItem);
                    });

                    // 设置搜索结果的高度
                    var screenHeight = $(window).height();
                    var maxHeight = screenHeight / 3;
                    var calculatedHeight = results.length * 40; // 假设每个结果项的高度为40px
                    var finalHeight = Math.min(maxHeight, calculatedHeight);
                    searchResults.css('height', finalHeight + 'px');

                    if (results.length != 0) {
                        // 显示搜索结果
                        searchResults.show();
                    } else {
                        searchResults.hide();
                    }
                }
            });
        });

        // 监听点击事件，隐藏搜索结果
        $(document).on('click', function(event) {
            var target = $(event.target);
            var searchResults = $('#searchResults');

            if (!target.closest('#searchResults').length && !target.is('#keyword')) {
                $('#keyword').val('');
                searchResults.hide();
            }
        });


        layui.form.on('radio(has_cover)', apply);
        apply({value: $('input[name="has_cover"]:checked').val()});
        function apply(data) {
            if (data.value == 1) {
                $('#cover_num').removeClass('layui-hide');
                $('#cover_num').addClass('block');
                $('#cover_price').removeClass('layui-hide');
                $('#cover_price').addClass('block');
            } else {
                $('#cover_price').addClass('layui-hide');
                $('#cover_price').removeClass('block');
                $('#cover_num').addClass('layui-hide');
                $('#cover_num').removeClass('block');
            }
        }
    })();

</script>
{/block}
